<template>
  <div class="dispatch-container">
    <el-card class="dispatch-card">
      <template #header>
        <div class="card-header">
          <div class="header-content">
            <div class="header-left">
              <h2>🚗 智能调度管理系统</h2>
              <p>基于AI分析的高峰时段调度推荐系统</p>
            </div>
            <div class="header-right">
              <el-button 
                type="primary" 
                @click="goHome" 
                class="back-home-btn"
                size="large"
              >
                <el-icon><House /></el-icon>
                返回主页
              </el-button>
            </div>
          </div>
        </div>
      </template>

      <!-- 功能导航 -->
      <el-tabs v-model="activeTab" type="border-card" class="dispatch-tabs">
        <!-- 调度推荐 -->
        <el-tab-pane label="📊 调度推荐" name="recommendation">
          <div class="tab-content">
            <el-form :model="recommendationForm" label-width="120px" class="form-section">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="司机">
                    <el-input v-model="driverName" placeholder="当前登录司机" readonly>
                      <template #prepend><el-icon><User /></el-icon></template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="时段分类">
                    <el-select v-model="recommendationForm.time_category" placeholder="选择时段">
                      <el-option label="早高峰 (7:00-9:00)" value="morning_peak" />
                      <el-option label="晚高峰 (17:00-19:00)" value="evening_peak" />
                      <el-option label="夜间高峰 (21:00-23:00)" value="night_peak" />
                      <el-option label="平时" value="normal" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-form-item>
                <el-button type="primary" @click="getRecommendation" :loading="recommendationLoading" size="large">
                  <el-icon><Search /></el-icon>
                  获取推荐
                </el-button>
                <el-button @click="resetRecommendationForm" size="large">重置</el-button>
              </el-form-item>
            </el-form>

            <!-- 推荐结果 -->
            <div v-if="recommendationResult" class="result-section">
              <el-divider content-position="left">
                <h3>📍 推荐结果</h3>
              </el-divider>

              <el-descriptions :column="3" border class="result-info">
                <el-descriptions-item label="司机姓名">{{ driverName }}</el-descriptions-item>
                <el-descriptions-item label="时段分类">{{ getTimeCategoryName(recommendationResult.time_category) }}</el-descriptions-item>
                <el-descriptions-item label="分析时间">{{ recommendationResult.analysis_date }}</el-descriptions-item>
              </el-descriptions>

              <div v-if="recommendationResult.top_recommendations" class="recommendations">
                <h4>🎯 推荐区域 (共{{ recommendationResult.top_recommendations.length }}个)</h4>
                <el-row :gutter="16">
                  <el-col :span="8" v-for="(area, index) in recommendationResult.top_recommendations" :key="index">
                    <el-card class="area-card" shadow="hover">
                      <div class="area-header">
                        <el-tag :type="getScoreType(area.recommendation_score)" size="large">
                          排名 #{{ index + 1 }}
                        </el-tag>
                        <span class="score">{{ area.recommendation_score }}分</span>
                      </div>
                      
                      <div class="area-info">
                        <p><strong>地点名称:</strong> {{ area.location_name || '未知地点' }}</p>
                        <p><strong>区域ID:</strong> {{ area.area_id }}</p>
                        <p><strong>坐标:</strong> {{ area.longitude }}, {{ area.latitude }}</p>
                        <p><strong>历史订单:</strong> {{ area.total_orders }}单</p>
                        <p><strong>平均表现:</strong> {{ area.avg_orders_per_driver }}单/司机</p>
                        <p><strong>成功率:</strong> {{ (area.success_rate * 100).toFixed(1) }}%</p>
                      </div>

                      <div class="area-reason">
                        <el-tag type="info" size="small">{{ area.recommendation_reason }}</el-tag>
                      </div>

                      <div class="area-actions">
                        <el-button type="primary" size="small" @click="acceptRecommendation(area)">
                          接受推荐
                        </el-button>
                        <el-button size="small" @click="viewOnMap(area)">
                          查看地图
                        </el-button>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 热点分析 -->
        <el-tab-pane label="🔥 热点分析" name="hotspot">
          <div class="tab-content">
            <el-form :model="hotspotForm" :inline="true" class="form-section">
              <el-form-item label="时段分类">
                <el-select v-model="hotspotForm.time_category" placeholder="选择时段">
                  <el-option label="早高峰" value="morning_peak" />
                  <el-option label="晚高峰" value="evening_peak" />
                  <el-option label="夜间高峰" value="night_peak" />
                  <el-option label="平时" value="normal" />
                </el-select>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="analyzeHotspots" :loading="hotspotLoading">
                  <el-icon><Search /></el-icon>
                  分析热点
                </el-button>
                <el-button @click="refreshHotspotData" :loading="hotspotLoading">
                  <el-icon><Refresh /></el-icon>
                  刷新数据
                </el-button>
              </el-form-item>
            </el-form>

            <!-- 分析结果 -->
            <div v-if="hotspotResult" class="result-section">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ hotspotResult.total_records || 0 }}</div>
                      <div class="stat-label">总记录数</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ hotspotResult.unique_drivers || 0 }}</div>
                      <div class="stat-label">活跃司机</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ hotspotResult.unique_areas || 0 }}</div>
                      <div class="stat-label">热点区域</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-item">
                      <div class="stat-value">{{ getCurrentTime() }}</div>
                      <div class="stat-label">更新时间</div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>

              <div v-if="hotspotResult.time_categories" class="chart-section">
                <h3>📊 时段分布统计</h3>
                <el-row :gutter="16">
                  <el-col :span="6" v-for="(count, category) in hotspotResult.time_categories" :key="category">
                    <el-card class="category-card">
                      <div class="category-info">
                        <div class="category-name">{{ getTimeCategoryName(category) }}</div>
                        <div class="category-count">{{ count }}单</div>
                        <div class="category-percent">
                          {{ ((count / getTotalOrders()) * 100).toFixed(1) }}%
                        </div>
                      </div>
                      <el-progress 
                        :percentage="(count / getTotalOrders()) * 100" 
                        :color="getCategoryColor(category)"
                        :show-text="false"
                      />
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 效果跟踪 -->
        <el-tab-pane label="📈 效果跟踪" name="effects">
          <div class="tab-content">
            <el-form :model="effectsForm" :inline="true" class="form-section">
              <el-form-item label="司机">
                <el-input v-model="driverName" placeholder="当前登录司机" readonly style="width: 200px">
                  <template #prepend><el-icon><User /></el-icon></template>
                </el-input>
              </el-form-item>
              
              <el-form-item label="查询天数">
                <el-select v-model="effectsForm.days" placeholder="选择天数">
                  <el-option label="最近3天" :value="3" />
                  <el-option label="最近7天" :value="7" />
                  <el-option label="最近15天" :value="15" />
                  <el-option label="最近30天" :value="30" />
                </el-select>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="queryEffects" :loading="effectsLoading">
                  <el-icon><Search /></el-icon>
                  查询效果
                </el-button>
                <el-button @click="resetEffectsForm">重置</el-button>
              </el-form-item>
            </el-form>

            <!-- 效果统计 -->
            <div v-if="effectsResult" class="result-section">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-card class="stat-card success">
                    <div class="stat-content">
                      <div class="stat-icon">🎯</div>
                      <div class="stat-info">
                        <div class="stat-value">{{ effectsResult.dispatch_count }}</div>
                        <div class="stat-label">推荐次数</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                
                <el-col :span="6">
                  <el-card class="stat-card warning">
                    <div class="stat-content">
                      <div class="stat-icon">✅</div>
                      <div class="stat-info">
                        <div class="stat-value">{{ (effectsResult.acceptance_rate * 100).toFixed(1) }}%</div>
                        <div class="stat-label">接受率</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                
                <el-col :span="6">
                  <el-card class="stat-card info">
                    <div class="stat-content">
                      <div class="stat-icon">🏆</div>
                      <div class="stat-info">
                        <div class="stat-value">{{ (effectsResult.success_rate * 100).toFixed(1) }}%</div>
                        <div class="stat-label">成功率</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                
                <el-col :span="6">
                  <el-card class="stat-card danger">
                    <div class="stat-content">
                      <div class="stat-icon">💰</div>
                      <div class="stat-info">
                        <div class="stat-value">¥{{ effectsResult.revenue_increase }}</div>
                        <div class="stat-label">收入增长</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>

              <!-- 效果评级 -->
              <div class="effect-rating">
                <h3>⭐ 调度效果评级</h3>
                <el-card>
                  <div class="rating-content">
                    <div class="rating-score">
                      <span class="score-value">{{ getEffectScore() }}</span>
                      <span class="score-label">分</span>
                    </div>
                    <div class="rating-level">
                      <el-tag :type="getRatingType()" size="large">
                        {{ getRatingText() }}
                      </el-tag>
                    </div>
                    <div class="rating-desc">
                      {{ getRatingDescription() }}
                    </div>
                  </div>
                </el-card>
              </div>
            </div>

            <!-- 记录调度结果 -->
            <div class="record-section">
              <el-divider content-position="left">
                <h3>📝 记录调度结果</h3>
              </el-divider>
              
              <el-form :model="recordForm" :inline="true">
                <el-form-item label="司机">
                  <el-input v-model="driverName" placeholder="当前司机" readonly />
                </el-form-item>
                <el-form-item label="区域ID">
                  <el-input v-model="recordForm.area_id" placeholder="区域ID" />
                </el-form-item>
                <el-form-item label="是否接受">
                  <el-switch v-model="recordForm.accepted" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="recordResult" :loading="recordLoading">
                    记录结果
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>


      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Tools, User, House } from '@element-plus/icons-vue'
import { dispatchAPI } from '@/api/dispatch'
import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()

// 响应式数据
const activeTab = ref('recommendation')
const driverName = ref('加载中...')

// 推荐相关
const recommendationLoading = ref(false)
const recommendationResult = ref(null)
const recommendationForm = reactive({
  driver_id: localStorage.getItem('userid') || '',
  time_category: 'morning_peak'
})

// 热点分析相关
const hotspotLoading = ref(false)
const hotspotResult = ref(null)
const hotspotForm = reactive({
  time_category: 'morning_peak'
})

// 效果跟踪相关
const effectsLoading = ref(false)
const effectsResult = ref(null)
const effectsForm = reactive({
  driver_id: localStorage.getItem('userid') || '',
  days: 7
})

// 记录表单
const recordLoading = ref(false)
const recordForm = reactive({
  driver_id: localStorage.getItem('userid') || '',
  area_id: '',
  accepted: false
})



// 获取当前用户信息
onMounted(async () => {
  try {
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    if (userInfo.real_name) {
      driverName.value = userInfo.real_name
    } else {
      const driverId = localStorage.getItem('userid') || ''
      try {
        const response = await fetch(`http://127.0.0.1:8000/login/users/${driverId}/`, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token') || 'dummy-token'}`
          }
        })
        if (response.ok) {
          const result = await response.json()
          if (result && result.real_name) {
            driverName.value = result.real_name
            localStorage.setItem('userInfo', JSON.stringify(result))
          } else {
            driverName.value = `司机${driverId}`
          }
        } else {
          driverName.value = `司机${driverId}`
        }
      } catch (apiError) {
        driverName.value = `司机${driverId}`
      }
    }
    // 使用数据库中存在的司机ID，如果localStorage中的ID不存在，则使用默认ID
    let driverId = localStorage.getItem('userid') || ''
    
    // 检查司机ID是否在有效范围内（我们的数据库从699开始）
    if (!driverId || parseInt(driverId) < 699) {
      driverId = '699' // 使用默认的司机ID
      console.log('使用默认司机ID:', driverId)
    }
    
    recordForm.driver_id = driverId
    recommendationForm.driver_id = driverId
    effectsForm.driver_id = driverId
  } catch (error) {
    console.error('获取用户信息失败:', error)
    let driverId = localStorage.getItem('userid') || ''
    
    // 检查司机ID是否在有效范围内
    if (!driverId || parseInt(driverId) < 699) {
      driverId = '699'
      console.log('使用默认司机ID:', driverId)
    }
    
    driverName.value = `司机${driverId}`
    recordForm.driver_id = driverId
    recommendationForm.driver_id = driverId
    effectsForm.driver_id = driverId
  }
})

// 推荐功能
async function getRecommendation() {
  if (!recommendationForm.driver_id) {
    ElMessage.warning('用户信息获取失败，请重新登录')
    return
  }

  recommendationLoading.value = true
  try {
    const response = await dispatchAPI.getDispatchRecommendation(recommendationForm)
    console.log('推荐结果:', response)
    
    if (response.data.code === 200) {
      const data = response.data.data
      
      // 构建推荐结果对象
      recommendationResult.value = {
        time_category: data.actual_time_category,
        analysis_date: data.analysis_date,
        top_recommendations: data.recommendations || [],
        similar_drivers: data.similar_drivers || [],
        requested_time_category: data.requested_time_category,
        actual_time_category: data.actual_time_category
      }
      
      ElMessage.success('推荐获取成功！')
    } else {
      ElMessage.error(response.data.message || '获取推荐失败')
    }
  } catch (error) {
    console.error('获取推荐失败:', error)
    ElMessage.error('获取推荐失败: ' + error.message)
  } finally {
    recommendationLoading.value = false
  }
}

function resetRecommendationForm() {
  recommendationForm.time_category = 'morning_peak'
  recommendationResult.value = null
}

// 热点分析功能
async function analyzeHotspots() {
  hotspotLoading.value = true
  try {
    const response = await dispatchAPI.getHotspotAnalysis(hotspotForm)
    console.log('热点分析结果:', response)
    
    if (response.data.code === 200) {
      const resultText = response.data.data.analysis_result
      
      try {
        // 尝试解析JSON
        const stats = JSON.parse(resultText)
        hotspotResult.value = {
          total_records: stats.total_records || 0,
          unique_drivers: stats.unique_drivers || 0,
          unique_areas: stats.unique_areas || 0,
          time_categories: stats.time_categories || {}
        }
      } catch (e) {
        console.error('解析热点分析结果失败:', e)
        hotspotResult.value = { 
          total_records: 0,
          unique_drivers: 0,
          unique_areas: 0,
          time_categories: {}
        }
      }
      
      ElMessage.success('热点分析完成！')
    } else {
      ElMessage.error(response.data.message || '分析失败')
    }
  } catch (error) {
    console.error('热点分析失败:', error)
    ElMessage.error('分析失败: ' + error.message)
  } finally {
    hotspotLoading.value = false
  }
}

function refreshHotspotData() {
  analyzeHotspots()
}

// 效果跟踪功能
async function queryEffects() {
  if (!effectsForm.driver_id) {
    ElMessage.warning('用户信息获取失败，请重新登录')
    return
  }

  effectsLoading.value = true
  try {
    const response = await dispatchAPI.getDispatchEffects(effectsForm)
    console.log('效果查询结果:', response)
    
    if (response.data.code === 200) {
      effectsResult.value = response.data.data
      ElMessage.success('查询成功！')
    } else {
      ElMessage.error(response.data.message || '查询失败')
    }
  } catch (error) {
    console.error('查询失败:', error)
    ElMessage.error('查询失败: ' + error.message)
  } finally {
    effectsLoading.value = false
  }
}

function resetEffectsForm() {
  effectsForm.days = 7
  effectsResult.value = null
}

// 记录结果
async function recordResult() {
  if (!recordForm.driver_id || !recordForm.area_id) {
    ElMessage.warning('请填写完整信息')
    return
  }

  recordLoading.value = true
  try {
    const response = await dispatchAPI.recordDispatchResult(recordForm)
    console.log('记录结果:', response)
    
    if (response.data.code === 200) {
      ElMessage.success('记录成功！')
      recordForm.area_id = ''
      recordForm.accepted = false
    } else {
      ElMessage.error(response.data.message || '记录失败')
    }
  } catch (error) {
    console.error('记录失败:', error)
    ElMessage.error('记录失败: ' + error.message)
  } finally {
    recordLoading.value = false
  }
}



// 接受推荐
async function acceptRecommendation(area) {
  try {
    await ElMessageBox.confirm(
      `确定要前往区域 ${area.area_id} 接单吗？`,
      '确认推荐',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }
    )

    const recordData = {
      driver_id: recommendationForm.driver_id,
      area_id: area.area_id,
      accepted: true,
      time_category: recommendationResult.value?.actual_time_category || 'normal',
      recommendation_score: area.recommendation_score || 0.0
    }

    const response = await dispatchAPI.recordDispatchResult(recordData)
    if (response.data.code === 200) {
      ElMessage.success('推荐已接受，祝您接单顺利！')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('记录推荐结果失败:', error)
    }
  }
}

// 查看地图（模拟功能）
function viewOnMap(area) {
  ElMessage.info(`正在打开地图查看区域: ${area.longitude}, ${area.latitude}`)
}

// 返回主页
function goHome() {
  router.push({ name: 'home' })
}

// 工具函数
function getTimeCategoryName(category) {
  const names = {
    'morning_peak': '早高峰',
    'evening_peak': '晚高峰',
    'night_peak': '夜间高峰',
    'normal': '平时'
  }
  return names[category] || category
}

function getScoreType(score) {
  if (score >= 20) return 'success'
  if (score >= 10) return 'warning'
  return 'info'
}

function getCurrentTime() {
  return new Date().toLocaleTimeString()
}

function getTotalOrders() {
  if (!hotspotResult.value?.time_categories) return 1
  return Object.values(hotspotResult.value.time_categories).reduce((sum, count) => sum + count, 0)
}

function getCategoryColor(category) {
  const colors = {
    'morning_peak': '#f56c6c',
    'evening_peak': '#e6a23c',
    'night_peak': '#909399',
    'normal': '#67c23a'
  }
  return colors[category] || '#409eff'
}

function getEffectScore() {
  if (!effectsResult.value) return 0
  const { acceptance_rate, success_rate, avg_orders_increase, revenue_increase } = effectsResult.value
  return Math.round(
    acceptance_rate * 25 + 
    success_rate * 25 + 
    Math.min(avg_orders_increase * 10, 25) + 
    Math.min(revenue_increase / 10, 25)
  )
}

function getRatingType() {
  const score = getEffectScore()
  if (score >= 80) return 'success'
  if (score >= 60) return 'warning'
  return 'danger'
}

function getRatingText() {
  const score = getEffectScore()
  if (score >= 90) return '优秀'
  if (score >= 80) return '良好'
  if (score >= 60) return '一般'
  return '需改进'
}

function getRatingDescription() {
  const score = getEffectScore()
  if (score >= 90) return '调度效果非常好，继续保持！'
  if (score >= 80) return '调度效果良好，有一定提升空间'
  if (score >= 60) return '调度效果一般，建议优化策略'
  return '调度效果需要改进，请检查推荐算法'
}
</script>

<style scoped>
.dispatch-container {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.dispatch-card {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.card-header {
  text-align: center;
  color: #333;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left h2 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 28px;
}

.header-left p {
  margin: 0;
  color: #7f8c8d;
  font-size: 16px;
}

.header-right .back-home-btn {
  background-color: #e74c3c; /* A slightly different color for the back button */
  border-color: #c0392b;
}

.header-right .back-home-btn:hover {
  background-color: #c0392b;
  border-color: #e74c3c;
}

.dispatch-tabs {
  margin-top: 20px;
}

.tab-content {
  padding: 20px 0;
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.result-section {
  margin-top: 20px;
}

.result-info {
  margin-bottom: 20px;
}

.recommendations {
  margin: 20px 0;
}

.recommendations h4 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 18px;
}

.area-card {
  margin-bottom: 16px;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.area-card:hover {
  transform: translateY(-5px);
}

.area-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.score {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
}

.area-info {
  margin-bottom: 15px;
}

.area-info p {
  margin: 5px 0;
  font-size: 14px;
  color: #555;
}

.area-reason {
  margin-bottom: 15px;
}

.area-actions {
  display: flex;
  gap: 10px;
}

.stat-card {
  text-align: center;
  margin-bottom: 20px;
}

.stat-item {
  padding: 20px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 20px;
}

.stat-icon {
  font-size: 32px;
  margin-right: 15px;
}

.stat-info {
  flex: 1;
}

.stat-card.success {
  border-left: 4px solid #67c23a;
}

.stat-card.warning {
  border-left: 4px solid #e6a23c;
}

.stat-card.info {
  border-left: 4px solid #409eff;
}

.stat-card.danger {
  border-left: 4px solid #f56c6c;
}

.chart-section {
  margin: 30px 0;
}

.chart-section h3 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.category-card {
  margin-bottom: 16px;
  text-align: center;
}

.category-info {
  padding: 15px;
}

.category-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.category-count {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.category-percent {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}

.effect-rating {
  margin: 30px 0;
}

.effect-rating h3 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.rating-content {
  text-align: center;
  padding: 30px;
}

.rating-score {
  margin-bottom: 20px;
}

.score-value {
  font-size: 48px;
  font-weight: bold;
  color: #409eff;
}

.score-label {
  font-size: 18px;
  color: #666;
  margin-left: 5px;
}

.rating-level {
  margin-bottom: 15px;
}

.rating-desc {
  font-size: 16px;
  color: #666;
}

.record-section {
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.test-data {
  margin-top: 15px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dispatch-container {
    padding: 10px;
  }

  .header-content {
    flex-direction: column;
    gap: 15px;
  }

  .header-left h2 {
    font-size: 24px;
    text-align: center;
  }

  .header-left p {
    text-align: center;
  }

  .header-right .back-home-btn {
    width: 100%;
  }

  .area-card {
    margin-bottom: 10px;
  }

  .area-actions {
    flex-direction: column;
  }
}
</style> 